<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Data-Table 表格</title>
    <link rel="stylesheet" href="__STATIC__/frame/layui/css/layui.css">
    <!--<link rel="stylesheet" href="http://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">-->
    <link rel="stylesheet" href="__STATIC__/frame/static/css/style.css">
    <link rel="icon" href="__STATIC__/frame/static/image/code.png">
</head>
<body class="body">

<!-- 工具集 -->
<div class="my-btn-box">
    <span class="fl">
        <a class="layui-btn layui-btn-danger radius btn-delect" id="btn-delete-all">批量删除</a>
        <a class="layui-btn btn-add btn-default" id="btn-add" data-href="{:url('index/create_branch')}">添加</a>
        <a class="layui-btn btn-add btn-default" id="btn-refresh"><i class="layui-icon">&#x1002;</i></a>
    </span>
    <span class="fr">
        <span class="layui-form-label">搜索条件：</span>
        <form action="{:url('index/branch')}" method="post">
        <div class="layui-input-inline">
            <input type="text" name="tiaojian" autocomplete="off" placeholder="请输入搜索条件" {if $tiaojian}value="{$tiaojian}"{/if} class="layui-input">
        </div>
        <button class="layui-btn mgl-20">查询</button>
        </form>
    </span>
</div>

<!-- 表格 -->
<div class="layui-row">
<table class="layui-table" style="width: 50%">
    <thead>
    <tr style="width: 50%">
        <th style="width: 1%;text-align: center">ID</th>
        <th style="width: 30%">课程分支名称</th>
        <th style="width: 30%">所属分类</th>
        <th style="width: 20%">操作</th>
    </tr>
    </thead>
    <tbody id="tbody">
    {foreach $data as $value}
    <tr>
        <td><input type="checkbox" value="{$value['id']}"></td>
        <td>{$value['branch_name']}</td>
        <td>{$value['class_name']}</td>
        <td><a href="javascript:;" onclick="edit({$value['id']})"><i class="layui-icon">&#xe642;</i></a><a href="javascript:;" style="margin-left: 10px" onclick="del({$value['id']})"><i class="layui-icon">&#xe640;</i></a></td>
    </tr>
    {/foreach}
    </tbody>
</table>
</div>
<div style="text-align: center;width: 50%">
    <div id="test"></div>
</div>
<script type="text/javascript" src="__STATIC__/frame/layui/layui.all.js"></script>
<script type="text/javascript" src="__STATIC__/js/index.js"></script>
<script type="text/javascript" src="__STATIC__/js/jquery.3.3.1.min.js"></script>
<script type="text/javascript" src="__STATIC__/js/maowenke.js"></script>
<!-- 表格操作按钮集 -->
<script>
    $("#btn-add").click(function () {
        var $html = $(this).attr('data-href');
        layer.open({ type: 2,
            title:'添加题目分类',
            skin: 'layui-layer-rim', //加上边框
            area: ['300px', '400px'], //宽高
            content: $html,
            end:function () {
                window.location.reload();
            }
        });
    });
    $("#btn-refresh").click(function () {
        window.location.reload();
    });
    function del($id) {
        layer.confirm('你确定要删除吗？',{btn:['确定','取消']},function () {
            $.post("{:url('del/branch')}",{id:$id},function (data) {
                console.log(data);
                if(data.code==200){
                    layer.msg(data.msg);
                    window.location.reload();
                }else{
                    layer.msg(data.msg);
                }
            })
        });

    };
    function edit($id) {
        layer.open({ type: 2,
            title:'添加题目分类',
            skin: 'layui-layer-rim', //加上边框
            area: ['300px', '400px'], //宽高
            content: "{:url('index/edit_branch')}?id="+$id,
            end:function () {
                window.location.reload();
            }
        });
    }
    $("#btn-delete-all").click(function () {
        var $id = getCheckbox($("[type=checkbox]"));
        layer.confirm('你确定要删除吗？',{btn:['确定','取消']},function () {
            $.post("{:url('del/branch')}",{id:$id},function (data) {
//                console.log(data);
                if(data.code==200){
                    layer.msg(data.msg);
                    window.location.reload();
                }else{
                    layer.msg(data.msg);
                }
            })
        });
    });
    layui.use('laypage', function(){
        var laypage = layui.laypage;
        //执行一个laypage实例
        laypage.render({
            elem: 'test' //注意，这里的 test1 是 ID，不用加 # 号
            ,count: parseInt("{$datarow}") //数据总数，从服务端得到
            ,limits:[10,20,30,40,50,60,70,80,90,100]
            ,layout:['limit','prev','page','next']
            ,jump:function (obj,first) {
                if(!first){
                    var $tiaojian = $("[name=tiaojian]").val();
                    var $limit =obj.limit;
                    var $page  = obj.curr;
                    $.post("{:url('page/branch')}",{limit:$limit,page:$page,tiaojian:$tiaojian},function (data) {
                        $("#tbody").empty();
                        var $str = '';
                        $.each(data,function (i,v) {
                            $str +='<tr>'+
                            '<td><input type="checkbox" value="'+v.id+'"></td>'+
                            '<td>'+v.branch_name+'</td>'+
                            '<td>'+v.class_name+'</td>'+
                            '<td><a href="javascript:;" onclick="edit('+v.id+')"><i class="layui-icon">&#xe642;</i></a><a href="javascript:;" style="margin-left: 10px" onclick="del('+v.id+')"><i class="layui-icon">&#xe640;</i></a></td>'+
                            '</tr>';
                        });
                        $("#tbody").append($str);
                    })
                }
            }
        });
    });
    function getPage() {
        var $limit = $("select").val();
        var $page  = $(".layui-laypage-curr").children('em').eq(1).text();
        var $tiaojian = $("[name=tiaojian]").val();
        $.post("{:url('page/branch')}",{limit:$limit,page:$page,tiaojian:$tiaojian},function (data) {
            console.log(data);
            $("#tbody").empty();
            var $str = '';
            $.each(data,function (i,v) {
                $str +='<tr>'+
                    '<td><input type="checkbox" value="'+v.id+'"></td>'+
                    '<td>'+v.branch_name+'</td>'+
                    '<td>'+v.class_name+'</td>'+
                    '<td><a href="javascript:;" onclick="edit('+v.id+')"><i class="layui-icon">&#xe642;</i></a><a href="javascript:;" style="margin-left: 10px" onclick="del('+v.id+')"><i class="layui-icon">&#xe640;</i></a></td>'+
                    '</tr>';
            });
            $("#tbody").append($str);
        })
    }
</script>
</body>
</html>